
<template>
  <div 
    class="goods-list" 
    :style="containerStyle"
  >
    <!-- 更多按钮 -->
    <div
      v-if="data.showMore && data.displayMode === 'list'"
      class="more-button"
      :style="{ marginRight: `${data.pageMargin}px` }"
    >
      更多》
    </div>

    <!-- 默认商品列表 -->
    <div
      v-if="!data.items || !data.items.length"
      class="goods-container"
      :class="goodsContainerClass"
      :style="goodsContainerStyle"
    >
      <div
        v-for="index in defaultItemCount"
        :key="index"
        class="goods-item"
        :class="goodsItemClass"
        :style="goodsItemStyle"
      >
        <!-- 商品图片 -->
        <div class="goods-image">
          <img
            :src="defaultGoodsImage"
            alt="默认商品"
            :style="{ borderRadius: `${data.borderRadius}px` }"
          />

          <!-- 商品标签 -->
          <el-tag
            v-if="data.showTag"
            :type="tagType"
            effect="dark"
            size="small"
            class="goods-tag"
          >
            {{ tagText }}
          </el-tag>
        </div>

        <!-- 商品信息 -->
        <div class="goods-info" :style="goodsInfoStyle">
          <!-- 商品名称 -->
          <h5 class="goods-name" :style="goodsNameStyle">
            {{ defaultGoodsName }}
          </h5>

          <!-- 商品描述 -->
          <p class="goods-desc" :style="goodsDescStyle">
            {{ defaultGoodsDesc }}
          </p>

          <!-- 价格和购买按钮 -->
          <div v-if="data.showPrice || data.showBuyButton" class="goods-actions">
            <span v-if="data.showPrice" class="goods-price">
              <i>￥</i>{{ defaultGoodsPrice }}
            </span>

            <div v-if="data.showBuyButton" class="buy-button">
              <el-icon
                v-if="data.buyButtonType === 'cart'"
                :size="23"
              >
                <ShoppingCartFull />
              </el-icon>

              <el-icon
                v-else-if="data.buyButtonType === 'plus'"
                :size="23"
              >
                <Plus />
              </el-icon>

              <el-icon
                v-else-if="data.buyButtonType === 'add'"
                :size="23"
              >
                <CirclePlus />
              </el-icon>

              <el-icon
                v-else-if="data.buyButtonType === 'cart-empty'"
                :size="23"
              >
                <ShoppingCart />
              </el-icon>

              <span v-else-if="data.buyButtonType === 'text'" class="buy-text">
                {{ data.buyButtonText || '购买' }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品数据列表 -->
    <div
      v-else
      class="goods-container"
      :class="goodsContainerClass"
      :style="goodsContainerStyle"
    >
      <div
        v-for="(item, index) in data.items"
        :key="index"
        class="goods-item"
        :class="goodsItemClass"
        :style="goodsItemStyle"
        @click="handleItemClick(item)"
      >
        <!-- 商品图片 -->
        <div class="goods-image">
          <img
            :src="item.image || defaultGoodsImage"
            :alt="item.name"
            :style="{ borderRadius: `${data.borderRadius}px` }"
          />

          <!-- 商品标签 -->
          <el-tag
            v-if="data.showTag && item.tag"
            :type="tagType"
            effect="dark"
            size="small"
            class="goods-tag"
          >
            {{ item.tag }}
          </el-tag>
        </div>

        <!-- 商品信息 -->
        <div class="goods-info" :style="goodsInfoStyle">
          <!-- 商品名称 -->
          <h5 class="goods-name" :style="goodsNameStyle">
            {{ item.name }}
          </h5>

          <!-- 商品描述 -->
          <p class="goods-desc" :style="goodsDescStyle">
            {{ item.description }}
          </p>

          <!-- 价格和购买按钮 -->
          <div v-if="data.showPrice || data.showBuyButton" class="goods-actions">
            <span v-if="data.showPrice" class="goods-price">
              <i>￥</i>{{ item.price }}
            </span>

            <div v-if="data.showBuyButton" class="buy-button">
              <el-icon
                v-if="data.buyButtonType === 'cart'"
                :size="23"
              >
                <ShoppingCartFull />
              </el-icon>

              <el-icon
                v-else-if="data.buyButtonType === 'plus'"
                :size="23"
              >
                <Plus />
              </el-icon>

              <el-icon
                v-else-if="data.buyButtonType === 'add'"
                :size="23"
              >
                <CirclePlus />
              </el-icon>

              <el-icon
                v-else-if="data.buyButtonType === 'cart-empty'"
                :size="23"
              >
                <ShoppingCart />
              </el-icon>

              <span v-else-if="data.buyButtonType === 'text'" class="buy-text">
                {{ data.buyButtonText || '购买' }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ShoppingCartFull, Plus, CirclePlus, ShoppingCart } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 容器样式
const containerStyle = computed(() => {
  return {
    ...props.styles,
    paddingTop: `${props.styles.marginTop || 0}px`,
    paddingRight: `${props.styles.marginRight || 0}px`,
    paddingBottom: `${props.styles.marginBottom || 0}px`,
    paddingLeft: `${props.styles.marginLeft || 0}px`
  }
})

// 定义事件
const emit = defineEmits(['item-click'])

// 默认数据
const defaultItemCount = computed(() => {
  if (props.data.displayMode === 'grid') {
    return 4
  } else if (props.data.displayMode === 'list') {
    return 2
  }
  return 4
})

const defaultGoodsImage = computed(() => '/src/assets/images/default-goods.png')
const defaultGoodsName = computed(() => '商品名称')
const defaultGoodsDesc = computed(() => '商品描述，最多显示1行')
const defaultGoodsPrice = computed(() => '99.00')

// 商品容器样式
const goodsContainerClass = computed(() => {
  const classes = []

  if (props.data.displayMode === 'grid') {
    classes.push('goods-grid')
  } else if (props.data.displayMode === 'list') {
    classes.push('goods-list')
  }

  return classes.join(' ')
})

const goodsContainerStyle = computed(() => {
  return {
    backgroundImage: props.data.backgroundImage ? `url(${props.data.backgroundImage})` : 'none',
    paddingTop: `${props.data.commodityMargin || 10}px`,
    paddingLeft: `${props.data.pageMargin || 10}px`,
    paddingRight: `${props.data.pageMargin || 10}px`
  }
})

// 商品项样式
const goodsItemClass = computed(() => {
  const classes = []

  if (props.data.displayMode === 'grid') {
    classes.push('goods-item-grid')
  } else if (props.data.displayMode === 'list') {
    classes.push('goods-item-list')
  }

  return classes.join(' ')
})

const goodsItemStyle = computed(() => {
  const style = {
    margin: `${props.data.commodityMargin || 10}px`,
    borderRadius: `${props.data.borderRadius || 0}px`
  }

  if (props.data.displayMode === 'grid') {
    style.width = props.data.commodityType === 'two-per-row' 
      ? `calc(50% - ${props.data.commodityMargin / 2}px)`
      : props.data.commodityType === 'three-per-row'
        ? `calc(33.33% - ${props.data.commodityMargin / 3}px)`
        : `calc(25% - ${props.data.commodityMargin / 4}px)`
  } else if (props.data.displayMode === 'list') {
    style.width = '100%'
    style.display = 'flex'
    style.marginBottom = `${props.data.commodityMargin || 10}px`
  }

  if (props.data.cardStyle === 'shadow') {
    style.boxShadow = '0 2px 8px rgba(93, 113, 127, 0.08)'
  } else if (props.data.cardStyle === 'border') {
    style.border = '1px solid rgba(50, 50, 51, 0.1)'
  }

  return style
})

// 商品信息样式
const goodsInfoStyle = computed(() => {
  return {
    background: props.data.cardStyle === 'transparent' ? 'none' : '#fff',
    borderTopRightRadius: `${props.data.borderRadius || 0}px`,
    borderBottomRightRadius: `${props.data.borderRadius || 0}px`
  }
})

// 商品名称样式
const goodsNameStyle = computed(() => {
  return {
    fontWeight: props.data.fontWeight || 'normal',
    textAlign: props.data.textAlign === 'center' ? 'center' : 'left'
  }
})

// 商品描述样式
const goodsDescStyle = computed(() => {
  return {
    textAlign: props.data.textAlign === 'center' ? 'center' : 'left'
  }
})

// 商品标签
const tagType = computed(() => {
  if (props.data.tagType === 'new') return 'primary'
  if (props.data.tagType === 'hot') return 'danger'
  if (props.data.tagType === 'custom') return 'warning'
  return ''
})

const tagText = computed(() => {
  if (props.data.tagType === 'new') return '新品'
  if (props.data.tagType === 'hot') return '热卖'
  if (props.data.tagType === 'custom') return props.data.customTagText || '自定义'
  return ''
})

// 事件处理
function handleItemClick(item) {
  emit('item-click', item)
}
</script>

<style lang="scss" scoped>
.goods-list {
  width: 100%;
  box-sizing: border-box;
  position: relative;

  .more-button {
    text-align: right;
    color: #666;
    font-size: 14px;
    padding: 5px 0;
    cursor: pointer;
  }

  .goods-container {
    display: flex;
    flex-wrap: wrap;

    // 网格布局
    &.goods-grid {
      justify-content: flex-start;

      .goods-item {
        &.goods-item-grid {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          cursor: pointer;

          .goods-image {
            position: relative;
            width: 100%;
            padding-top: 100%;

            img {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .goods-tag {
              position: absolute;
              top: 5px;
              left: 5px;
            }
          }

          .goods-info {
            padding: 8px;
            flex: 1;

            .goods-name {
              margin: 0 0 5px;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .goods-desc {
              margin: 0 0 8px;
              font-size: 12px;
              color: #999;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .goods-actions {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .goods-price {
                color: #f56c6c;
                font-weight: bold;

                i {
                  font-style: normal;
                  font-size: 12px;
                }
              }

              .buy-button {
                cursor: pointer;

                .buy-text {
                  font-size: 12px;
                  color: #409eff;
                }
              }
            }
          }
        }
      }
    }

    // 列表布局
    &.goods-list {
      flex-direction: column;

      .goods-item {
        &.goods-item-list {
          display: flex;
          overflow: hidden;
          cursor: pointer;

          .goods-image {
            width: 100px;
            height: 100px;
            flex-shrink: 0;
            position: relative;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .goods-tag {
              position: absolute;
              top: 5px;
              left: 5px;
            }
          }

          .goods-info {
            flex: 1;
            padding: 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .goods-name {
              margin: 0;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .goods-desc {
              margin: 5px 0;
              font-size: 12px;
              color: #999;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .goods-actions {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .goods-price {
                color: #f56c6c;
                font-weight: bold;

                i {
                  font-style: normal;
                  font-size: 12px;
                }
              }

              .buy-button {
                cursor: pointer;

                .buy-text {
                  font-size: 12px;
                  color: #409eff;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
